import React from 'react'
import PropTypes from 'prop-types'
import moment from 'moment'
import _ from 'loadsh'
import Component, { mapStateToProps, mapDispatchToProps } from '@components/Component'
import { connect } from 'react-redux'
import { TitleLine, TextLine, TextCell, Split } from '@components/ApprovePre/Approve'
import style from './Step.module.less'
import { download } from '@js/downloadRename'

class StepFiveHistory extends Component {
  state = {
    keyTitleMap: {}
  }

  // 格式化日期
  formatDate (date) {
    if (date) {
      return moment(date * 1000).format('YYYY-MM-DD HH:mm')
    }
  }

  initKeyTitleMap () {
    const map = {}
    const list = _.get(this.props.action || {}, 'vars', [])
    list.forEach(li => {
      map[li.key] = li.title
    })
    this.setState({
      keyTitleMap: map
    })
  }

  // 获取完整key值
  getKey (key) {
    const { preKey } = this.props
    return `${preKey}_${key}`
  }

  // 根据key获取标题
  getTitleByKey (key) {
    const { keyTitleMap } = this.state
    return keyTitleMap[this.getKey(key)]
  }

  // 获取值
  getValueByKey (key, nullValue = '无') {
    const { action, preKey } = this.props
    const { varsMap } = action
    return (varsMap[`${preKey}_${key}`] || {}).value || nullValue
  }

  // 格式化时间戳为时间字符串
  formatValueToTime (n) {
    if (n) {
      return moment(n * 1000).format('YYYY-MM-DD')
    }
    return '无'
  }

  componentDidUpdate (prev) {
    if (this.props.instance !== prev.instance) {
      this.initKeyTitleMap()
    }
  }

  componentDidMount () {
    this.initKeyTitleMap()
  }

  // 渲染上传文件列表
  renderFileList (list = []) {
    if (!(list instanceof Array) || !list.length) {
      return '无'
    }
    return list.map((li, i) => {
      return (
        <span key={i} className={style['file-link']}>
          <span>{i + 1}、</span>
          <a className={style.link} onClick={() => download(li.path, li.original_filename)}>{li.original_filename}</a>
        </span>
      )
    })
  }

  // 渲染当事人
  renderParty (v) {
    if (!v) {
      return '无'
    }
    try {
      const o = JSON.parse(v)
      return o.name
    } catch (e) {
      console.error(e)
    }
  }

  renderReason () {
    const t = this.getTitleByKey.bind(this)
    const v = this.getValueByKey.bind(this)
    if (!t('bill_description')) {
      return null
    }
    return (
      <TextLine>
        <TextCell>{t('bill_description')}：{v('bill_description')}</TextCell>
      </TextLine>
    )
  }

  render () {
    const { action } = this.props
    const t = this.getTitleByKey.bind(this)
    const v = this.getValueByKey.bind(this)
    return (
      <div>
        <TitleLine title={this.props.action.step_name} operator={action.operator} time={this.formatDate(action.complete_datetime)} />
        <TextLine>
          <TextCell>{t('ispay')}：{v('ispay')}</TextCell>
          <Split />
          <TextCell>{t('pay_datetime')}：{this.formatValueToTime(v('pay_datetime', false))}</TextCell>
          <Split />
          <TextCell>{t('platform_serialno')}：{v('platform_serialno')}</TextCell>
        </TextLine>
        <TextLine>
          <TextCell>{t('pay_amount')}：{v('pay_amount')}</TextCell>
          <Split />
          <TextCell>{t('fee_acceptance')}：{v('fee_acceptance')}</TextCell>
          <Split />
          <TextCell>{t('fee_processing')}：{v('fee_processing')}</TextCell>
        </TextLine>
        <TextLine>
          <TextCell>{t('payer_actual')}：{this.renderParty(v('payer_actual', ''))}</TextCell>
          <Split />
          <TextCell>{t('bill_remark1')}：{v('bill_remark1')}</TextCell>
          <Split />
          {/* <TextCell>{t('docket_datetime')}：{this.formatValueToTime(v('docket_datetime', false))}</TextCell> */}
        </TextLine>
        {this.renderReason()}
        <TextLine>
          <TextCell style={{ width: '65%' }}>
            {t('pay_fileid')}：{this.renderFileList(v('pay_fileid', []))}
          </TextCell>
        </TextLine>
        <TextLine>
          <TextCell style={{ width: '65%' }}>{action.remark_alias || '备注'}：{action.remark || '无'}</TextCell>
        </TextLine>
        {this.props.renderDocument()}
      </div>
    )
  }
}

StepFiveHistory.proptypes = {
  userInfo: PropTypes.object,
  instance: PropTypes.object,
  action: PropTypes.object,
  renderDocument: PropTypes.func
}

StepFiveHistory.defaultProps = {
  userInfo: {},
  instance: {},
  action: {},
  renderDocument: () => { }
}

const mapState = mapStateToProps(function (state) {
  return {

  }
})

const mapDispatch = mapDispatchToProps(function (dispatch) {
  return {

  }
})

export default connect(mapState, mapDispatch)(StepFiveHistory)
